<template>
<div class="blivetab">
  <nav class="bili-tab">
    <div class="bili-tab-item" :class="{on:tabCount == index}" @click="selectTab(index)" v-for="(tab,index) in tabTitle">{{tab}}</div>
  </nav>
  <div class="tab-box">
    <div class="tab-con clearfix" ref="tabwrap" style="margin-left: -200%;">
      <div class="tab-item rank">
        <div class="r-item">
          <span class="number">1</span>
          <a target="_blank" class="preview">
            <div class="lazy-img">
              <img src="//i1.hdslb.com/bfs/face/85bd12a028ea4c4fa66448acc4ddc0609e824e01.jpg@80w_80h.webp"/>
            </div>
          </a>
          <a target="_blank">
            <div class="r-i">
              <p class="r-i-t">
                <span class="u-name">剑网3官方视频</span>
                <span class="u-online">
                  <i></i>
                  <em>21.4万</em>
                </span>
              </p>
              <div class="r-i-st" title="13：00剑网3竞技大师赛线下赛">13：00剑网3竞技大师赛线下赛</div>
            </div>
          </a>
        </div>
      </div>
      <div class="tab-item">
        <div class="load-state">
          <span class="empty">没有数据(-_-#)</span>
        </div>
      </div>
      <div class="tab-item tuijian">
        <div class="slider-box">
          <div class="carousel-module slider">
            <div class="panel">
              <ul class="pic" style="width:200%;margin-left:0%">
                <li class="scrollx off">
                  <a target="_blank">
                    <div class="lazy-img">
                      <img src="//i0.hdslb.com/bfs/live/1baf3cd0725002976a108ecf78cf890963a6bc4f.jpg@260w_248h.webp"/>
                    </div>
                  </a>
                </li>
                <li class="scrollx off">
                  <a target="_blank">
                    <div class="lazy-img">
                      <img src="//i0.hdslb.com/bfs/live/1baf3cd0725002976a108ecf78cf890963a6bc4f.jpg@260w_248h.webp"/>
                    </div>
                  </a>
                </li>
              </ul>
              <ul class="title">
                <a target="_blank" class="on">
                  哔哩哔哩要8岁啦！
                </a>
              </ul>
              <ul class="trig">
                <span class="on"></span>
                <span></span>
                <span></span>
              </ul>
            </div>
          </div>
        </div>
        <div class="anchor clearfix">
          <a target="_blank" class="pic fl">
            <img src="//s1.hdslb.com/bfs/static/phoenix/home/static/img/wh.e47004e.png" alt="有文画"/>
          </a>
          <a target="_blank" class="pic fr">
            <img src="//s1.hdslb.com/bfs/static/phoenix/home/static/img/sp.b4bc4ee.png" alt="小视频"/>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>

export default {
  name: 'blivetab',
  data () {
    return {
      tabCount: 0,
      tabTitle: ['直播排行', '关注的主播', '为你推荐']
    };
  },
  methods: {
    selectTab (index) {
      this.tabCount = index;
      // eslint-disable-next-line
      let distance = -100 * this.tabCount;
      // eslint-disable-next-line
      let left = distance + '%';
      this.$refs.tabwrap.style.marginLeft = left;
    }
  }
};
</script>

<style lang="stylus" scoped>
.bili-tab
  overflow hidden
  zoom 1
  .bili-tab-item
    float left
    position relative
    height 20px
    line-height 20px
    cursor pointer
    padding 1px 0 2px
    border-bottom 1px solid transparent
    margin-left 12px
    transition .2s
    transition-property border,color
    &:first-child
      margin-left 0
    &.on
      background-color transparent
      border-color #00a1d6
      color #00a1d6
      &:before
        display block
    &:before
      display none
      content ""
      position absolute
      left 50%
      margin-left -3px
      bottom 0
      width 0
      height 0
      border 3px dashed #00a1d6
      border-bottom-style solid
      border-top 0
      border-left-color transparent
      border-right-color transparent
.tab-box
  margin-top 20px
  overflow hidden
  .tab-con
    width 780px
    transition all .3s
  .tab-item
    width 260px
    float left
    .r-item
      overflow hidden
      position relative
      margin 0 0 14px
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3)
        .number
          background-color #f25d8e
      .preview
        display block
        float left
        position relative
        margin-right 12px
        width 40px
        height 40px
        border-radius 50%
        overflow hidden
      .number
        position absolute
        color #fff
        height 18px
        line-height 18px
        top 0
        left 0
        font-size 12px
        min-width 12px
        text-align center
        z-index 20
        border-radius 4px
        padding 0 3px
        font-weight 700
        float left
        margin-right 6px
        background-color #b8c0cc
      .r-i
        width 205px
        float left
      .r-i-t
        line-height 16px
        overflow hidden
        .u-name
          max-width 135px
          float left
          color #222
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
        .u-online
          max-width 60px
          float right
          color #99a2aa
          line-height 16px
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
          em
            font-style normal
            font-weight 700
          i
            display inline-block
            vertical-align middle
            width 12px
            height 12px
            margin-top -2px
            background url(../../assets/images/live-eye.png) no-repeat 
      .r-i-st
        margin-top 4px
        color #99a2aa
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
        max-width 190px
        font-weight 700
  .rank
    .r-item
      padding-left 25px
      .r-i
        width 180px
  .tuijian
    border-radius 4px
    overflow hidden
    .anchor
      .pic
        margin-top 20px
        display inline-block
    .slider-box
      height 248px
    .slider
      .panel
        border-radius 4px
        .pic
          z-index 1
          position relative
          transition all .3s
          li
            position relative
            a
              display inline-block
          .scrollx
            float left
        .title
          height 51px
          line-height 30px
          font-size 12px
          a
            position absolute
            width 100%
            color #fff
            padding-left 10px
            opacity 0
            z-index -1
            transition all .3s
            &.on
              opacity 1
              z-index 1
        .trig
          bottom 0
          right 0
          width 100%
          text-align center
          padding 5px 0
          background rgba(0,0,0,.4)
  .panel
    .title
      z-index 2
      position absolute
      bottom 0
      left 0
      width 100%
      height 35px
      line-height 35px
      background rgba(0,0,0,.5)
      font-size 14px
    .trig
      position absolute
      z-index 3
      bottom 6px
      right 20px
      span
        display inline-block
        width 10px
        height 6px
        margin-left 8px
        border-radius 10px
        background #fff
        cursor pointer
        transition all .3s
        &.on
          width 30px
          background #f45d8f
.load-state
  text-align center
  padding 10px 0
  color #99a2aa
  height 100%
  display table
  width 100%
  .empty
    &:before
      background-position center -598px
  span
    font-weight 700
    &:before
      content ""
      text-align center
      display inline-block
      vertical-align middle
      width 20px
      height 20px
      background-repeat no-repeat
      margin-right 5px
      margin-top -3px
      background-image url(../../../static/images/empty-icon.png)
.carousel-module
  position relative
  width 100%
  height 100%
  .panel
    overflow hidden
</style>
